// const { json } = require("body-parser");

$(function () {

    $(".myaccount_li").on("mouseenter",function(){
        $(".myaccount_cont").show();
    }).on("mouseleave",function(){
        $(".myaccount_cont").hide();
    })
    //选择/关闭城市
    $(".city").on("click", function (e) {
        $(".position .shade").show();
        $(this).addClass("selecting");
        $(".selectCity").show();
        $(this).find(".selectCity").css({
            left: -2,
        })
        return false;
    })
    $(".selectCity").find(".close").on("click", function () {
        $(".selectCity").hide();
        $(".position .shade").hide();
        $(".city").removeClass("selecting");
        $(this).parent(".selectCity").css({
            left: 75,
        })
        return false;
    })
    $(".hotCity").on("click", "dd", function (e) {
        if (e.target != this) {
            return;
        }
        $(".city").find(".currentCity").html($(this).html());
        $(".city").find(".current_set").html($(this).html());
        $(".selectCity").hide();
        $(".position .shade").hide();
        $(".city").removeClass("selecting");
        $(".selectCity").css({
            left: 75,
        })
        return false;
    })

    //添加allkinds背景图
    $(".allKinds").find("dd").each(function (index, el) {
        $(el).find("i").css({
            background: `url('./img/index/list${index + 1}.png')`,
        })
    })

    //鼠标移入改变i背景图的颜色
    $(".allKinds").find("dd").hover(function () {
        var _this = this;
        $(".allKinds .item").eq($(this).index() - 1).addClass("showItem").siblings().removeClass("showItem");
        $(this).find("i").css({
            background: `url('./img/index/list${$(_this).index()}.png') -19px 0`,
        })
    }, function () {
        var _this = this;
        $(this).find("i").css({
            background: `url('./img/index/list${$(_this).index()}.png') 0px 0`,
        })
        $(".allKinds .item").removeClass("showItem");
    })

    //轮播图 
    // 1、获取li的个数 动态创建ol点击的点
    for (var i = 0; i < $(".picchange ul li").length; i++) {
        var oLi = $("<li></li>");
        if (i == 0) {
            $(oLi).addClass("show");
        }
        $(".picchange ol").append($(oLi));
    }
    var oOl = $(".picchange ol").width();
    $(".picchange ol").css({
        marginLeft: -oOl / 2,
    })

    var currentIndex = 0;
    var timer = setInterval(function () {
        autoPlay();
    }, 2000)
    function autoPlay() {
        currentIndex++;
        if (currentIndex >= $(".picchange ul li").length) {
            currentIndex = 0;
        }
        $(".picchange ul li").eq(currentIndex).addClass("current").siblings().removeClass("current");

        $(".slider-num li").eq(currentIndex).addClass("show").siblings().removeClass("show");
    }
    $(".picchange").on("mouseenter", function () {
        $(this).find(".slider-btn").animate({
            opacity: 1
        }, 300);
        clearInterval(timer);
        $(this).find(".prev").on("click", function () {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = $(".picchange ul li").length-1;
            }
            $(".picchange ul li").eq(currentIndex).addClass("current").siblings().removeClass("current");
            $(".slider-num li").eq(currentIndex).addClass("show").siblings().removeClass("show");
            return false;
        });
        $(this).find(".next").on("click", function () {
            currentIndex++;
            if (currentIndex >= $(".picchange ul li").length) {
                currentIndex = 0;
            }
            $(".picchange ul li").eq(currentIndex).addClass("current").siblings().removeClass("current");
            $(".slider-num li").eq(currentIndex).addClass("show").siblings().removeClass("show");
            prevIndex = currentIndex;
            return false;
        });
        $(".slider-num").on("click", "li", function (e) {
            if (e.target != this) {
                return;
            }
            $(this).addClass("show").siblings().removeClass("show");
            $(".picchange ul li").eq($(this).index()).addClass("current").siblings().removeClass("current");
            $(".slider-num li").eq($(this).index()).addClass("show").siblings().removeClass("show");
            currentIndex = $(this).index();
        })
    }).on("mouseleave",function(){
        $(this).find(".slider-btn").animate({
            opacity: 0
        }, 300);
        timer = setInterval(function () {
            autoPlay();
        }, 2000);
        $(this).find(".prev").off();
        $(this).find(".next").off();
        $(".slider-num").off();
    })
    $.louceng();

    let userinfo = JSON.parse(localStorage.getItem("userinfo")||'[]');
    $(".myaccount_cont_l").find(".login").text(`${userinfo[0].u_name}`);
    $(".myaccount_cont_r .loginshoye").find("a").text("账户首页");
    $(".logAndreg").html(`${userinfo[0].u_name},您好!&nbsp;
    <a style="font-size:12px;" class="quit" href="#">退出</a>`);

    $(".logAndreg").on("click",".quit",function(){
        localStorage.clear();
        $(".logAndreg").html(` <ul clear>
        <li>hi,欢迎来到我买网！</li>
        <li class="lar">
            <a href="./login.html" target="_black">登录</a>
        </li>
        <li class="lar">
            <a href="./register.html" target="_black">注册</a>
        </li>
    </ul>`);
    })

    $(".wm-toolbar-footer ul").on("mouseenter","li",function(){
        let _this = this;
        $(this).find("span").css("display","block");
        $(this).find("em").css({
            "backgroundPosition": `-${($(_this).index())*$(_this).width()}px -${$(_this).height()}px`,
        });
    }).on("mouseleave","li",function(){
        let _this = this;
        $(this).find("span").css("display","none");
        $(this).find("em").css({
            "backgroundPosition": `-${($(_this).index())*$(_this).width()}px 0px`,
        });
    })
    
    $(".wm-toolbar-tab").click(function () {
        $('html ,body').animate({ scrollTop: 0 }, 300);
        return false;
    })

    console.log( $(".floor-r .con li"));
    $(".floor-r .con li").on("mouseenter","dt",function(){
        $(this).find("img").animate({
            left:10
        },200);
    }).on("mouseleave","dt",function(){
        $(this).find("img").animate({
            left:0
        },200);
    })
})